import { memo } from 'react'
import { useMount, useRequest, useSetState } from 'ahooks'
import { logout } from '@/apis'
import { Token, UserInfo } from '@/apis/config'

import { Button, Layout } from 'antd'

const { Header: BaseHeader } = Layout

const User = () => {
  const [userInfo, setUserInfo] = useSetState({ name: '' })

  useMount(() => {
    setUserInfo(UserInfo.get())
  })

  return <>{userInfo.name}，欢迎您</>
}

const Header = () => {
  const { run: hanldeLogout } = useRequest(() => logout(), {
    manual: true,
    onSuccess: () => {
      Token.remove()
      location.href = '/login'
    }
  })

  return (
    <BaseHeader className="shadow relative z-10 flex items-center justify-end">
      <User />

      <Button className="ml-16" type="text" danger onClick={hanldeLogout}>
        退出登录
      </Button>
    </BaseHeader>
  )
}

export default memo(Header)
